<!--
* @description  
* @fileName  1_事件基本使用
* @author zhoujunlin
* @date 2022-02-10 21:54:00
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1_事件基本使用</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm，而是Window；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
-->
<body>
    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo">点我提示信息</button>
        <button @click="showInfo1">点我提示信息1（不传参）</button>
        <button @click.right="showInfo1">右击点我提示信息1（不传参）</button>
        <button @click="showInfo2($event, 10000)">点我提示信息2（传参）</button>
        <!-- .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。 -->
        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button v-on:click.exact="showInfo1">A</button>
         <!-- 除ctrl外没有其它系统修饰符被按下的时候才触发 -->
         <button v-on:click.ctrl.exact="showInfo1">A</button>           
         <!-- 只要有shift被按下就会触发 -->
        <button v-on:click.shift="showInfo1">A</button>
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    "name":"gaodun"
                }
            },
            methods: { // 方法
                showInfo:(event)=>{
                    // 不推荐使用
                    // this为window对象
                    console.log(this);
                    alert("你好")
                },
                showInfo1(event){
                    // 不传参  默认收到event对象
                    // 获取标签内容
                    console.log(event.target.innerText);
                    // this为vm实例
                    console.log(this);
                    alert("你好")
                },
                showInfo2(event, param){
                    console.log(event, param);
                    alert("你好")
                }
            }
        });

    </script>
</body>

</html>